import React from 'react'
import { Button } from 'antd-mobile'
import './room.css'

class Room extends React.Component {

  componentDidMount() {
    document.title = '填写入库资料'
  }

  render() {
    return (
      <div className="_room">
        <div className="count_down">
          <span className="count_down-title">距竞拍结束仅剩：</span>
          <span className="count_down-time">02分:59秒</span>
        </div>
        <div className="main">
          <div className="container">
            <div className="container-box">
              <div className="title">
                <div className="container-left">
                  <div className="title-name">当前竞拍项目</div>
                </div>
                <div className="container-right">
                  <div className="title-value">大型商业演出招标项目</div>
                </div>
              </div>
            </div>
          </div>
          <div className="container">
            <div className="container-box">
              <div className="progress">
                <div className="progress-item">
                  <div className="progress-time">1:21:00 </div>
                  <div className="progress-title">竞价开始了</div>
                </div>
                <div className="progress-item">
                  <div className="progress-time">1:21:00 </div>
                  <div className="progress-title">阿里巴巴有限公司出价</div>
                  <div className="progress-money">￥80000</div>
                </div>
                <div className="progress-item">
                  <div className="progress-time">1:21:00 </div>
                  <div className="progress-title">腾讯技术有限公司出价</div>
                  <div className="progress-money">￥90000</div>
                </div>
                <div className="progress-item">
                  <div className="progress-time">1:21:00 </div>
                  <div className="progress-title">腾讯技术有限公司出价</div>
                  <div className="progress-money">￥60000</div>
                </div>
                <div className="progress-item">
                  <div className="progress-time">1:21:00 </div>
                  <div className="progress-title">竞价自动延时3分钟</div>
                </div>
              </div>
            </div>
          </div>
          <div className="container">
            <div className="container-box">
              <div className="rank">
                <div className="rank-title">实时排名</div>
                <div className="rank-main">
                  <div className="rank-item active">
                    <div className="rank-left">
                      <div className="rank-item-title">第一名 腾讯技术有限公司</div>
                    </div>
                    <div className="rank-right">
                      <div className="rank-item-money">￥60000</div> 
                    </div>
                  </div>
                  <div className="rank-item active">
                    <div className="rank-left">
                      <div className="rank-item-title">第二名 阿里巴巴有限公司</div>
                    </div>
                    <div className="rank-right">
                      <div className="rank-item-money">￥80000</div> 
                    </div>
                  </div>
                  <div className="rank-item active">
                    <div className="rank-left">
                      <div className="rank-item-title">第三名 喜洋洋影视有限公司</div>
                    </div>
                    <div className="rank-right">
                      <div className="rank-item-money">￥0</div> 
                    </div>
                  </div>
                  <div className="rank-item">
                    <div className="rank-left">
                      <div className="rank-item-title">第四名 京东物流有限公司</div>
                    </div>
                    <div className="rank-right">
                      <div className="rank-item-money">￥0</div> 
                    </div>
                  </div>
                  <div className="rank-item">
                    <div className="rank-left">
                      <div className="rank-item-title">第五名 天猫电商有限公司</div>
                    </div>
                    <div className="rank-right">
                      <div className="rank-item-money">￥0</div> 
                    </div>
                  </div>
                  <div className="rank-item">
                    <div className="rank-left">
                      <div className="rank-item-title">第六名 猫眼电影有限公司</div>
                    </div>
                    <div className="rank-right">
                      <div className="rank-item-money">￥0</div> 
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="bottom">
          <div className="bottom-money">￥60000</div>
          <Button className="bottom-btn" type="primary">出价</Button>
        </div>
      </div>
    )
  }

}

export default Room